<template>
  <div>
    <div
      class="pictureList_styl"
      v-for="(item, index) in defaultList"
      :key="index"
      :style="{ width: imgWidth, height: imgHeight }"
    >
      <template>
        <!-- <img :src="require(`http://192.168.1.105:8080/id=${item}`)" /> -->
        <img :src="imagePreviewUrl + item" />
        <div class="pictureListCover_styl">
          <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
          <Icon
            type="ios-trash-outline"
            @click.native="handleRemove(item, index)"
          ></Icon>
        </div>
      </template>
    </div>

    <!-- 图片上传组件 -->
    <Upload
      v-if="!isOneImage || (isOneImage && defaultList.length != 1)"
      :data="{ secretFlag: 'N' }"
      ref="upload"
      :show-upload-list="false"
      :headers="{ Authorization: token }"
      :on-success="handleSuccess"
      :format="['jpg', 'jpeg', 'png']"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      type="drag"
      :action="action"
      :before-upload="handleBeforeUpload"
      style="display: inline-block"
    >
      <div
        :style="{ width: imgWidth, height: imgHeight, lineHeight: imgHeight }"
      >
        <Icon type="ios-camera" size="40"></Icon>
      </div>
    </Upload>

    <!-- 图片预览组件 -->
    <PreviewImg
      v-if="previewIsShow"
      :upDown="false"
      @listenChild="previewIsShow = false"
      :images="images"
    />
  </div>
</template>
<script>
import PreviewImg from "./previewImg";
import Setting from "@/setting.env";
import localData from "../../../localData";
export default {
  props: {
    action: {
      type: String,
      default: Setting.imageBaseURL,
    }, // 上传图片地址
    imageList: {
      type: Array,
      default: () => [],
    }, // 图片列表
    isOneImage: {
      type: Boolean,
      default: false,
    }, // 是否仅上传一张图片 默认false
    imgWidth: {
      type: String,
      default: "120px",
    }, // 图片宽
    imgHeight: {
      type: String,
      default: "120px",
    }, // 图片高
  },
  components: {
    PreviewImg,
  },
  data() {
    return {
      defaultList: [],
      previewFileBucket: "/sysFileInfo/previewByObjectName?fileBucket=",
      previewFileObjectName: "&fileObjectName=",
      token: this.$store.state.login.store_token,
      previewIsShow: false,
      images: "", // 预览图片
      imagePreviewUrl: localData.API_URl+'/guns',
    };
  },
  watch: {
    imageList: {
      handler(val) {
        this.defaultList = [];
        for (let i = 0; i < val.length; i++) {
          this.defaultList.push(val[i]);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 图片预览
    handleView(imgUrl) {
      console.log(imgUrl);
      this.images = imgUrl;
      this.previewIsShow = true;
    },
    // 删除预览图片
    handleRemove(file, index) {
      this.imageList.splice(index, 1);
      this.$emit("changeval", this.imageList);
    },
    // 图片上传成功
    handleSuccess(res, file) {
      console.log(res);
      let one = this.previewFileBucket + res.data.fileBucket;
      let two = this.previewFileObjectName + res.data.fileObjectName;
      this.imageList.push(one + two);
      this.$emit("changeval", this.imageList);
    },
    // 图片文件格式检查
    handleFormatError(file) {
      this.$Notice.warning({
        title: "警告",
        desc: "文件 " + file.name + " 格式不正确",
      });
    },
    // 限制图片文件大小
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "警告",
        desc: "文件  " + file.name + " 大小超过 2M.",
      });
    },
    // 上传图片之前
    handleBeforeUpload() {
      if (this.isOneImage && this.defaultList.length == 1) {
        this.$Notice.warning({
          title: "警告",
          desc: "当前仅可上传一张图片",
        });
        return false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pictureList_styl {
  display: inline-block;
  width: 125px;
  height: 125px;
  text-align: center;
  line-height: 125px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.pictureList_styl img {
  width: 100%;
  height: 100%;
}
.pictureListCover_styl {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.pictureList_styl:hover .pictureListCover_styl {
  display: block;
}
.pictureListCover_styl i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
